<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-form :inline="true" :model="listQuery" ref="dataList2" class="demo-form-inline">
            <el-input class="marginRB10" v-model="listQuery.room_id" placeholder="房间ID" style="width:200px;"
                      clearable></el-input>
            <el-input class="marginRB10" v-model="listQuery.room_name" placeholder="房间名称" style="width:200px;"
                      clearable></el-input>
            <el-button type="primary" @click="searchList" icon="el-icon-search" class="marginRB10">搜索</el-button>
          </el-form>
        </el-row>
      </div>
      <div class="item">
        <el-table v-loading="listLoading" ref="dataList" :data="menuList" style="margin-bottom: 20px;" border
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <!-- 编号	房间ID	当前房名	操作人	修改前	修改后	修改类型	修改时间 -->
          <el-table-column prop="id" label="编号"></el-table-column>
          <el-table-column prop="room_id" label="房间ID"></el-table-column>
          <el-table-column prop="room_name" label="当前房名"></el-table-column>
          <el-table-column prop="operator" label="操作人"></el-table-column>
          <el-table-column prop="change_from" label="修改前"></el-table-column>
          <el-table-column prop="change_to" label="修改后"></el-table-column>
          <el-table-column prop="type" label="修改类型">
            <template slot-scope="{row}">
              <el-tag :type="row.type === 1 ? 'warning' : 'primary'">{{row.type === 1 ? '房间编号' : '房间名称'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="add_time" label="修改时间"></el-table-column>

        </el-table>
        <!-- 分页 -->
        <cus-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.perPage"
          @pagination="getList"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import {listData} from '@/api/room/changeList'

export default {
  data() {
    return {
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        perPage: 10,
        room_id: undefined,
        room_name: undefined,
      },
      menuList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      titleMap: {
        update: '编辑',
        create: '增加'
      },
      form: {
        id: undefined,
        name: undefined,
      },
      rules: {
        name: [{required: true, message: '请输入名字', trigger: 'blur'}],
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      let urlData = '?';
      if (this.listQuery.page) {
        urlData = urlData + `page=${this.listQuery.page}&`
      }
      if (this.listQuery.perPage) {
        urlData = urlData + `perPage=${this.listQuery.perPage}`
      }
      if (this.listQuery.room_id) {
        urlData = urlData + `&room_id=${this.listQuery.room_id}`
      }
      if (this.listQuery.room_name) {
        urlData = urlData + `&room_name=${this.listQuery.room_name}`
      }

      listData(urlData).then(({data: {data, total}}) => {
        this.menuList = data
        this.total = total
        this.listLoading = false
      })
    },
    searchList() {
      this.listQuery.page = 1
      this.getList()
    }
  }
}
</script>
<style scoped>
[v-cloak] {
  display: none;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}

.demo-form-inline {
  float: right;
}

/deep/ .el-card__header {
  padding-bottom: 0;
}
</style>
